<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>医院管理</el-breadcrumb-item>
      <el-breadcrumb-item>医院管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 基本信息表单 -->
    <el-card>
      <div slot="header">
        <span>编辑员工</span>
      </div>
      <!-- 表单 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="110px"
      >
        <!-- 员工姓名 -->
        <el-form-item label="员工姓名" prop="nick_name">
          <el-input v-model="addForm.nick_name" placeholder="请输入"></el-input>
        </el-form-item>
        <!-- 手机号 -->
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="addForm.mobile"
            placeholder="请输入，将作为登录账号"
          ></el-input>
        </el-form-item>
        <!-- 账号类型 -->
        <el-form-item label="账号类型" prop="grade">
          <el-select
            v-model="addForm.grade"
            placeholder="请选择"
            filterable
            clearable
            disabled
          >
            <el-option
              key="2"
              label="普通员工"
              :value="typeof addForm.grade == 'string' ? '2' : 2"
            ></el-option>
            <el-option
              key="6"
              label="医生"
              :value="typeof addForm.grade == 'string' ? '6' : 6"
            ></el-option>
            <el-option
              key="10"
              label="院长"
              :value="typeof addForm.grade == 'string' ? '10' : 10"
            ></el-option>
            <el-option
              label="院长"
              :value="typeof addForm.grade == 'string' ? '14' : 14"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 初始密码 -->
        <el-form-item label="初始密码" prop="pwd_one">
          <el-input
            v-model="addForm.pwd_one"
            placeholder="密码由6至16位数字和字母组成"
            onkeyup="value=value.replace(/[^a-z0-9_]/g,'');"
            maxlength="16"
            show-word-limit
          ></el-input>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item label="确认密码" prop="pwd_two">
          <el-input
            v-model="addForm.pwd_two"
            placeholder="请输入"
            onkeyup="value=value.replace(/[^a-z0-9_]/g,'');"
            maxlength="16"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <el-row style="margin-top: 10px">
        <el-button
          @click="
            $router.push({
              path: '/hospital/Staff',
              query: { id: addForm.hospital_id }
            })
          "
        >
          取 消
        </el-button>
        <el-button class="theme-background-color" @click="saveInfo"
          >保 存</el-button
        >
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    var checkphone = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('请输入手机号'))
      } else if (!this.isCellPhone(value)) {
        // 引入methods中封装的检查手机格式的方法
        callback(new Error('请输入正确的手机号!'))
      } else {
        callback()
      }
    }
    var checkPassword = (rule, value, callback) => {
      const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
      if (value == '') {
        callback(new Error('请输入'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入正确的密码'))
      } else {
        callback()
      }
    }
    return {
      addForm: {},
      addFormRules: {
        nick_name: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入', trigger: 'blur' },
          { validator: checkphone, message: '请输入正确的手机号' }
        ],
        grade: [{ required: true, message: '请选择', trigger: 'change' }],
        pwd_one: [],
        pwd_two: []
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    // 检查手机号
    isCellPhone(val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false
      } else {
        return true
      }
    },
    async getInfo() {
      const { data: res } = await this.$http.post(
        'admin/hospital/getStaffInfo',
        { id: this.$route.query.id }
      )
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      res.data.pwd_one = ''
      res.data.pwd_two = ''
      res.data.grade = res.data.grade + ''
      this.addForm = res.data
    },
    search() {
      if (this.addForm.pwd_one != '') {
        this.addFormRules.pwd_two = [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            validator: checkPassword,
            message: '6-16位数字和字母组成',
            trigger: 'blur'
          }
        ]
        this.addFormRules.pwd_one = [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            validator: checkPassword,
            message: '6-16位数字和字母组成',
            trigger: 'blur'
          }
        ]
      } else {
        this.addFormRules.pwd_two = []
        this.addFormRules.pwd_one = []
      }
    },
    async saveInfo() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return
        if (this.addForm.pwd_one != this.addForm.pwd_two) {
          return this.$message.error('两次输入的密码不一致')
        }
        const { data: res } = await this.$http.post(
          'admin/hospital/addStaff',
          this.addForm
        )
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.$message.success(res.meta.msg)
        this.$router.push({
          path: '/hospital/Staff',
          query: { id: this.addForm.hospital_id }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-form {
  width: 600px;
  margin-left: 15px;
  .el-select {
    width: 100%;
  }
}
</style>
